
import { Breadcrumb, Col, Layout, Row } from 'antd';
import React, { useState,useEffect } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { adminRoutes } from '../../router';
import './index.css'
import SideMenu from './components/SideMenu';
import logo from '../../assets/img/logo.png'
import smlogo from '../../assets/img/logo_sm.png'
import DropMenu from './components/DropMenu';
import {connect} from 'react-redux'
const { Header, Content, Footer, Sider } = Layout;

const Main = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  let [filterRoutes,setFilterRoutes] = useState([])
  let {rolecode} = props.user.userInfo //提取用户的角色代号
  useEffect(()=>{
    let arr = []
    adminRoutes.forEach(item=>{  //将双层的路由数据包，处理为单层
      if(item.children){
        arr = [...arr,...item.children]
      }else{
        arr.push(item)
      }
    })
    setFilterRoutes(arr)
  },[])

  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo">
          <img className='logo1' src={logo} alt="" />
          <img className='logo2' src={smlogo} alt="" />
        </div>
        <SideMenu/>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          <Row justify='end'>
              <DropMenu/>
          </Row>
        </Header>
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: 360,
            }}
          >
            <Switch>
              {
                filterRoutes.map((item)=>{
                  let bool = item.roles.includes(rolecode)
                  return bool ? <Route {...item} key={item.path}/> : ''
                })
              }
              <Redirect from='*' to='/admin/404'/>
            </Switch>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default connect(({user})=>({user}))(Main);